<template>
    <el-menu
      :default-active="activePath"
      class="el-menu-vertical"
      background-color="#f5f5f5"
      @select="handleSelect"
      router
    >
      <el-sub-menu index="1">
        <template #title><span>成员管理</span></template>
        <el-menu-item index="/member/add">添加成员</el-menu-item>
        <el-menu-item index="/member/list">成员列表</el-menu-item>
      </el-sub-menu>
  
      <el-sub-menu index="2">
        <template #title><span>成绩管理</span></template>
        <el-menu-item index="/score/add">添加成绩</el-menu-item>
        <el-menu-item index="/score/query">成绩查询</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </template>
  
  <script setup>
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const activePath = route.path
  
  function handleSelect() {
    // 自动由 router 处理跳转
  }
  </script>
  
  <style scoped>
  .el-menu-vertical {
    height: 100%;
    border-right: none;
  }
  </style>
  